<template>
  <c-dialog
    v-model="dialogVisible"
    :title="id ? `编辑${author}` : `新建${author}`"
    :width="'700px'"
    :before-close="handleClose">
    <el-form :model="form" :rules="rules" class="album-dialog-form" label-position="top" ref="formRef">
      <el-form-item :label="`${author}ID`" prop="author_id">
        <el-input v-model="form.author_id" :placeholder="`请输入${author}ID`" size="large" />
      </el-form-item>
      <el-form-item label="账号类型" prop="is_org">
        <el-select v-model="form.is_org" style="width: 100%;" placeholder="请选择账号类型">
          <el-option label="机构账号" :value="true" />
          <el-option label="个人账号" :value="false" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #action>
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </c-dialog>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import { type FormRules } from 'element-plus';
import type { AuthorInter } from '@/typings/interface.ts'
import http from '@/utils/http'
import { useMessage } from '@/utils/utils';

/**
 * 实例
 */
interface Props {
  modelValue: boolean
  id?: number
  author_type?: 'answer' | 'publisher'
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  author_type: 'answer'
})
const emit = defineEmits(['update:modelValue', 'submit'])
const placeholder = computed(() => {
  return props.author_type === 'answer' ? '请输入该答主最新回答或关注的问题id' : '请输入该题主新添加的问题id'
})
const author = computed(() => {
  return props.author_type === 'answer' ? '答主' : '题主'
})

/**
 * 变量
 */
const dialogVisible = computed({
  get () {
    return props.modelValue
  },
  set (val) {
    emit('update:modelValue', val)
  }
})
const form: any = reactive({
  author_id: '',
  is_org: false,
})
const rules: FormRules = reactive({
  author_id: [
    { required: true, message: `请输入${author.value}id`, trigger: ['blur', 'change'] }
  ],
  is_org: [
    { required: true, message: `请选择${author.value}是否机构账号`, trigger: ['blur', 'change'] }
  ],
})
// 表单ref
const formRef = ref(null)

/**
 * 回调函数
 */
// 关闭窗口
const handleClose = () => {
  dialogVisible.value = false
}
// 提交
const submit = () => {
  // @ts-ignore
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (form.id) {
        itemUpdate()
      } else {
        itemCreate()
      }
    }
  })
}
// 获取详情
function getDetail () {
  http('/author/detail', {
    id: props.id
  }).then((res: any) => {
    const detail: AuthorInter = res.data
    form.id = detail.id
    for (let key in form) {
      // @ts-ignore
      form[key] = detail[key]
    }
  })
}
// 创建
const itemCreate = () => {
  http('/author/create', {
    ...form,
    author_type: props.author_type,
  }).then(res => {
    useMessage('创建成功')
    handleClose()
    emit('submit')
  })
}
// 更新
const itemUpdate = () => {
  http('/author/update', {
    ...form
  }).then(res => {
    useMessage('更新成功')
    handleClose()
    emit('submit')
  })
}

/**
 * 监听器
 */
watch(() => props.id, (val: any) => {
  if (val) {
    getDetail()
  }
}, {
  immediate: true
})
</script>

<style lang="scss">
.album-dialog-form {
  width: 100%;
  margin-bottom: 10px;
}
</style>